<template>
  <el-card>
    <el-row :gutter="20" style="padding-bottom: 15px">
      <div class="login-title">商品名称：</div>
      <el-col :span="5">
        <el-input placeholder="请输入商品名称"></el-input>
      </el-col>
      <el-button type="primary" icon="Search">搜索</el-button>
    </el-row>
    <!-- 用户列表 -->
    <el-table
      stripe
      :header-cell-style="{
        background: '#FAFAFA',
        color: '#000',
      }"
      :data="proUserList"
      style="width: 100%"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column prop="id" label="ID" width="50" align="center" />
      <el-table-column prop="goods_id" label="商品ID" width="300" align="center" />
      <el-table-column width="100" align="center" label="头像">
        <template #default="{ row }">
          <el-avatar :src="row.goods_img" />
        </template>
      </el-table-column>
      <el-table-column
        prop="goods_name"
        label="商品名称"
        width="400"
        align="center"
      />
      <el-table-column prop="goods_price" label="商品售价" width="120" align="center" />
      <el-table-column prop="goods_stock" label="库存" width="190" align="center" />
      <el-table-column prop="goods_sales" label="销量" width="80" align="center" />
      <el-table-column prop="goods_sid" label="二级Id" width="80" align="center" />
      <el-table-column fixed="right" label="操作" align="center" width="250">
        <template #default>
          <el-button link type="primary" size="large">
            <el-icon><EditPen /></el-icon>查看
          </el-button>
          <el-button link type="danger" size="large">
            <el-icon><Delete /></el-icon>编辑
          </el-button>
          <el-button link type="success" size="large">
            <el-icon><CopyDocument /></el-icon>移除商品
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="paginate-div">
      <el-pagination
        v-model:current-page="query.page"
        v-model:page-size="query.limit"
        :page-sizes="[1, 2, 5, 10]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-card>
  <Config></Config>
</template>
  
  <script setup>
import goodsApi from "@/request/apis/goods.js";
import { onMounted, ref } from "vue";
import { EditPen, Delete, CopyDocument, Search } from "@element-plus/icons-vue";

const query = ref({
  page: 1,
  limit: 10,
});

const total = ref(0);

const proUserList = ref([]);

const getUsers = () => {
  goodsApi.goods(query.value.page, query.value.limit).then((res) => {
    proUserList.value = res.result.data_liat;
    total.value = res.result.total;
  });
};

const handleSizeChange = (pageSize) => {
  query.value.limit = pageSize;
  getUsers();
};

const handleCurrentChange = (pageNum) => {
  query.value.page = pageNum;
  getUsers();
};

onMounted(() => {
  getUsers();
});
</script>
  
  <style>
.login-title {
  font-size: 14px;
  color: #606266;
  line-height: 32px;
  margin-left: 15px;
}

.paginate-div {
  margin-top: 25px;
  width: 100%;
  height: 50px;
  display: flex;
  align-content: center;
  justify-content: center;
}
</style>